<template>
    <div class="sys-page">
        <app-title :title="dialogTitle" style="display:inline;"></app-title>
        <el-button type="success" @click="refresh()" round style="float:right; margin-top:10px;" icon="el-icon-refresh">刷新</el-button>
        <el-table
            :data="tableData"
            :span-method="objectSpanMethod"
            border
            style="width: 100%; margin-top: 20px">

            <el-table-column prop="module" label="权限类型" align="center"></el-table-column>
            <el-table-column style="background-color:16#123456" label="数据安全" width="120" align="center">
                   <template slot-scope="scope">
                        <div v-if="scope.row.isSafe==false">
                            <i class="el-icon-warning"></i>
                            <span style="color:red"> 数据异常</span>
                        </div>
                        <div v-else-if="scope.row.isSafe==true">
                            <i class="el-icon-success"></i>
                            <span style="color:green">数据完整</span>
                        </div>
                  </template>
                </el-table-column>
            <el-table-column prop="id" label="权限编码" align="center"></el-table-column>
            <el-table-column width='300'  prop="name" label="权限名称" align="center"></el-table-column>
            <el-table-column prop="prop_nopolice"label="是否非警员访问" align="center" :formatter="policeFormatter"> </el-table-column>
            <el-table-column prop="prop_core" label="是否核心模块" align="center" :formatter="kernelFormatter"></el-table-column>
            <el-table-column  prop="prop_unusual" label="是否常规业务" align="center" :formatter="normalFormatter"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.isSafe==false"  type="text" size="small"  @click="modify(scope.row)">修改</el-button>
                   </template>
            </el-table-column>
            <!--<el-table-column  prop="prop_prop" label="" align="center"></el-table-column>-->
        </el-table>

        <el-dialog :title="dialogTitle" :visible.sync="modifyVisible" width='40%'
                   :fullscreen='false'>
            <el-form :model="permissionObj" ref="addForm" class="">

                    <el-form-item prop="name" label="权限名称  :"  :label-width="formLabelWidth">
                        <el-input ref="name" v-model="permissionObj.name" :disabled="true"></el-input>
                    </el-form-item>
                    
                       <el-row>
                    <el-col :span="8">
                      <el-checkbox label="是否仅警员访问" v-model="prop_nopolice"  border></el-checkbox>
                  </el-col>
                  <el-col :span="8">
                      <el-checkbox label="是否核心功能" v-model="prop_core" border></el-checkbox>
                  </el-col>
                  <el-col :span="8">
                      <el-checkbox label="是否常规业务" v-model="prop_unusual" border></el-checkbox>
                  </el-col>
                  </el-row>
                   <!--  <el-form-item label="访问级别:">
                        <el-radio-group v-model="permissionObj.prop_nopolice">
                            <el-radio label="允许非警员访问"></el-radio>
                            <el-radio label="禁止非警员访问"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                <el-form-item label="是否核心:">
                    <el-radio-group v-model="permissionObj.prop_core">
                        <el-radio label="核心功能"></el-radio>
                        <el-radio label="非核心功能"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否常规:">
                    <el-radio-group v-model="permissionObj.prop_unusual">
                        <el-radio label="常规业务"></el-radio>
                        <el-radio label="非常规业务"></el-radio>
                    </el-radio-group>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="modifyVisible = false">取 消</el-button>

                <el-button type="primary"   v-loading="loading"
                           @click.native.prevent="handleModCommit()" >确 定</el-button>

            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'permission',
        data() {

            return {
                dialogTitle: '权限属性配置',
                editDisable: false,
                modifyVisible: false,
                loading: false,
                formLabelWidth: '80px',
                tableData: [],
                prop_nopolice: false,
                prop_core: false,
                psId: '',
                psName: '',
                psType: '',
               
                prop_unusual: true,
                permissionObj:{}
            };
        },
        methods: {
            modify: function (row) {
                this.permissionObj = row;
                this.prop_nopolice = (row.prop_nopolice==1?true:false);
                this.prop_unusual = (row.prop_unusual==1?true:false);
                this.psName = row.name;
                this.psId = row.id;
                this.psType = row.id.substr(0,1);
                this.prop_core = (row.prop_core==1?true:false)

                this.modifyVisible = true;
            },
            normalFormatter: function (row, index, value) {
                if(1 == row.prop_unusual){
                    return "常规业务"
                }else{
                    return "非常规业务"
                }
            },
            kernelFormatter: function (row, index, value) {
                if(1 == row.prop_core){
                    return "核心模块"
                }else{
                    return "非核心模块"
                }
            },
            policeFormatter: function (row, index, value) {
                if(0 == row.prop_nopolice){
                    return "允许非警员访问";
                }else if(1 == row.prop_nopolice){
                    return "禁止非警员访问";
                }
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex === 0) {
                    if (rowIndex === 0) {
                        return {
                            rowspan: 14,
                            colspan: 1
                        };
                    } else if(rowIndex ==14){
                        return {
                            rowspan: 10,
                            colspan: 1
                        };
                    }else if(rowIndex == 24) {
                        return {
                            rowspan: 10,
                            colspan: 1
                        }
                    }else if(rowIndex == 34)
                    {
                        return {
                            rowspan: 10,
                            colspan: 1
                        }
                    }else{
                        return {
                            rowspan: 0,
                            colspan: 0
                        }
                    }
                }
            },
            handleModCommit:function () {
                
                let data = {
                    "psId":this.psId,
                    "psName":this.psName,
                    "psType": this.psType,
                    "isKernel": this.prop_core==true?1:0,
                    "isNormalService": this.prop_unusual==true?1:0,
                    "isPoliceOnly": this.prop_nopolice==true?1:0
                }
                this.HTTP.methods.apiPut("/permission/modify.shtml", data).then(
                    res =>{
                         if (res.code != 200) {
                            this.$message(res.msg, 'error');
                        // this.GLOBAL._g.toastMsg('error', res.msg)
                        } else {
                            this.$message("设置成功", 'success');
                            this.query()
                            // this.GLOBAL._g.toastMsg('success', '修改成功')
                        }
                        this.loading = false;
                        this.modifyVisible = false;
                    }).catch(function (error) {
                       this.loading = false;
                        $.message("网络超时", 'error')
                        this.modifyVisible = false;
                    });
            },
            refresh(){
                    this.query()
        },

            query(){
                this.HTTP.methods.apiGet("/permission/find.shtml").then(res =>
                {
                    if(res.code == 200){
                        this.tableData = []
                            for(var i=0; i<res.data.groupA.length; i++){
                            var obj = {};
                            obj.module = "系统管理"
                            obj.id = res.data.groupA[i].id;
                            obj.name = res.data.groupA[i].name;
                            obj.prop_core = res.data.groupA[i].prop_core;
                            obj.prop_nopolice = res.data.groupA[i].prop_nopolice;
                            
                            obj.prop_unusual = res.data.groupA[i].prop_unusual;
                            obj.isSafe = res.data.groupA[i].isSafe;
                            this.tableData.push(obj);
                        }
                        for(var i=0; i<res.data.groupB.length; i++){
                            var obj = {};
                            obj.module = "安全管理"
                            obj.id = res.data.groupB[i].id;
                            obj.name = res.data.groupB[i].name;
                            obj.prop_core = res.data.groupB[i].prop_core;
                            obj.prop_nopolice = res.data.groupB[i].prop_nopolice;
                            // if(res.data.groupB[i].prop_prop==1){
                            //     this.editDisable = false;
                            // }else{
                            //     this.editDisable = true;
                            // }
                            obj.prop_unusual = res.data.groupB[i].prop_unusual;
                            obj.isSafe = res.data.groupB[i].isSafe;
                            this.tableData.push(obj);
                        }
                        for(var i=0; i<res.data.groupC.length; i++){
                            var obj = {};
                            obj.module = "业务办理"
                            obj.id = res.data.groupC[i].id;
                            obj.name = res.data.groupC[i].name;
                            obj.prop_core = res.data.groupC[i].prop_core;
                            obj.prop_nopolice = res.data.groupC[i].prop_nopolice;
                            // if(res.data.groupC[i].prop_prop==1){
                            //     this.editDisable = false;
                            // }else{
                            //     this.editDisable = true;
                            // }

                            obj.prop_unusual = res.data.groupC[i].prop_unusual;
                            obj.isSafe = res.data.groupC[i].isSafe;
                            this.tableData.push(obj);
                        }
                        for(var i=0; i<res.data.groupD.length; i++){
                            var obj = {};
                            obj.module = "审计管理"
                            obj.id = res.data.groupD[i].id;
                            obj.name = res.data.groupD[i].name;
                            obj.prop_core = res.data.groupD[i].prop_core;
                            obj.prop_nopolice = res.data.groupD[i].prop_nopolice;
                            
                            obj.prop_unusual = res.data.groupD[i].prop_unusual;
                            obj.isSafe = res.data.groupD[i].isSafe;
                            this.tableData.push(obj);
                        }
                    }else{
                        this.tableData = []
                        this.$message("网络超时", 'error')
                    }
                    this.loading = false
            })

            }
        },

        created() {
            this.query()
        }
    };
</script>
